<template>
    <div ref="ganttContainer" style="width: 100%; height: 400px"></div>
</template>

<script setup>
    import { onMounted, ref } from 'vue'
    import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
    import gantt from 'dhtmlx-gantt'

    const ganttContainer = ref(null)
    function generateGanttData(total = 10000) {
        const data = []
        let idCounter = 1

        for (let i = 0; i < total / 10; i++) {
            // 一级：人员
            const rootId = `member-${i}`
            data.push({
                id: rootId,
                text: `李帅亮-${i}-后端开发工程师`,
                parent: 0,
                open: true
            })

            // 二级：子节点
            const subId = `sub-${i}`
            data.push({
                id: subId,
                text: `李帅亮-chengy-${i}`,
                parent: rootId,
                open: true
            })

            // 三级：任务
            for (let j = 0; j < 8; j++) {
                const start = new Date(2025, 9, 1 + (j % 10))
                const end = new Date(start)
                end.setDate(start.getDate() + 3)

                data.push({
                    id: `task-${i}-${j}`, // 👈 保证唯一字符串 id
                    text: `任务-${i}-${j}`,
                    start_date: start.toISOString().split('T')[0],
                    end_date: end.toISOString().split('T')[0],
                    parent: subId
                })

                idCounter++
            }
        }

        return data
    }

    onMounted(() => {
        // 最小树形示例数据

        // 基础列
        gantt.config.columns = [{ name: 'text', label: '任务', width: 300, tree: true }]
        gantt.config.smart_rendering = true
        gantt.config.smart_scales = true
        gantt.config.details_on_dblclick = false
        // 禁用双击空白处创建新任务
        gantt.config.details_on_create = false
        // 初始展开所有树节点
        gantt.config.open_tree_initially = true
        gantt.config.prerender = 10
        gantt.init(ganttContainer.value)
        const testData = generateGanttData(10000)
        gantt.parse({ data: testData })
    })
</script>

<style scoped>
    .gantt_task_content {
        background-color: #87cefa !important;
        border-radius: 4px;
    }
</style>
